<template>
    <div class="login-container">
        <header>
            <div class="head">
                <span class="title">郑州第一附属医院</span>
            </div>
            <div class="middle"></div>
            <div class="bottom"></div>
        </header>
        <div class="appName">
            <span>豫医通——精细化医疗管理专家</span>
        </div>
        <section class="content">
            <div class="login">
                <div class="login_box">
                    <div class="login_msg">
                        <div class="login_title">后台系统登录</div>
                        <div class="waring"><span class="error_msg">{{waringMsg}}</span></div>
                        <ul>
                            <li class="item">
                                <span >账户</span>
                                 <input type="text" placeholder="请输入用户名" class="user_name" v-model="user_name">
                                 <img :src="userNamePic" alt="">
                            </li>
                            <li class="item">
                                <span >密码</span>
                                 <input type="password" placeholder="请输入密码" class="password" v-model="password">
                                 <img :src="passwordPic" alt="">
                            </li>
                            <li>
                                <button class="btn" @click="handleLogin">登录</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="foot_msg">技术支持：河南三融云合信息技术有限公司</div>
        </footer>
    </div>
</template>
<script>
    export default {
        name: 'Login',
        data(){
            return{
                userNamePic:require('@/assets/user_name.png'),
                passwordPic:require('@/assets/password.png'),
                user_name:'',
                password:'',
                waringMsg:''
            }
        },
        methods:{
            handleLogin(){
                if(!this.user_name){
                    this.waringMsg = '账户不能为空!'
                }else if(!this.password){
                    this.waringMsg = '请输入密码!'
                }else{
                    this.waringMsg = '' 
                    let param={
                        "username":this.user_name,
                        "password":this.password
                    }
                this.$store.dispatch('Login',param).then((data)=>{
                    console.log('登录成功')
                })
                .catch((data) => {
                    this.waringMsg = '用户或密码错误！'
                });
               }
            }
        }
    }
</script>
<style lang="stylus" scoped>
    header{
        width:100%;  
    }
    .head{
        width:10rem; 
        height:.2604166666666667rem;
        line-height:.2604166666666667rem;
        text-indent:.4739583333333333rem;
        background:#3FBDFF;

    }
    .title{
        font-size:.0885416666666667rem;
        color:#000;
        font-weight:600;
    }
    .middle,.bottom{
        background:#3FBDFF;
    }
    .middle{
        height:.1041666666666667rem;
        margin:.0520833333333333rem 0;
    }
    .bottom{
        height:.0520833333333333rem;
    }
    .appName{
        text-align: right;
        width:10rem;
    }
    .appName span{
         display: inline-block;
        font-size:.1875rem;
        margin-top:.5989583333333334rem;
        margin-right:2.15625rem;
    }
    .content{
        width:100%;
        height:2.0833333333333335rem;
        margin-top:.390625rem;
        background:url(../../assets/banner.png) no-repeat;
        background-size:100%;
    }
    .login{
        width:10rem;
        position:relative;
    }
    .login_box{
        width:2.6041666666666665rem;
        height:2.2916666666666665rem;
        background:url(../../assets/login_box.png) no-repeat;
        position:absolute;
        right:2.1354166666666665rem;
        top:-0.1041666666666667rem;
        display:flex;
        justify-content: center;
        align-items: center;
        background-size: 100%;
    }
    .login_msg{
        width:2.0989583333333335rem;
        margin:0 auto;
        .waring{
            text-indent: .0520833333333333rem;
        }
        .error_msg{
            color:yellow;
        }
    }
    .login_title{
        font-size:.1458333333333333rem;
        font-weight:600;
        color:#fff;
        margin-bottom:.125rem;
    }
    .item{
        display:flex;
        justify-content: space-around;
        align-items: center;
        border-bottom:1px solid #FFFFFF;
        line-height:.3854166666666667rem;
        input::-webkit-input-placeholder{
          color:#fff;
        }
    }
    .item span{
        font-size:.125rem;
        font-weight:600;
        color:#fff;
    }
    .item input{
        background:transparent;
        width:1.40625rem;
        height:.15625rem;
        font-size:.0885416666666667rem;
        outline:none;
        border:0;
        color:#fff;
    }
    .btn{
        width:2.0833333333333335rem;
        height:.2083333333333333rem;
        background:#B9DAFF;
        margin-top:.34375rem;
        outline: none;
        color:#fff;
        font-size:.0885416666666667rem;
        letter-spacing: .0052083333333333rem;
    }
    footer{
        position:fixed;
        bottom:.0885416666666667rem;
        width:100%;
        height:.2604166666666667rem;
        background:#3FBDFF;
        .foot_msg{
            font-size:.0885416666666667rem;
            text-align: center;
            line-height: .2604166666666667rem;
        }
    }

</style>

 